import React, { memo } from 'react'
import { PictureWrapper } from './style'
import { useSelector } from 'react-redux'

const Picture = memo(() => {
  const { pictureInfo } = useSelector(state => state.pictures)

  return (
    <PictureWrapper>
      <div className='content'>
        <div className='left'>
          <div className='item'>
            <img src={pictureInfo.picture_url} alt="" />
            <div className='cover'></div>
          </div>
        </div>
        <div className='right'>
          {
            pictureInfo.picture_urls.slice(1,5).map((item,index) =>{
              return (
                <div className='item'>
                  <img src={item} key={index} alt="" />
                  <div className='cover'></div>
                </div>
              )
            })
          }
        </div>
      </div>
    </PictureWrapper>
  )
})

export default Picture